<template>
	<el-dialog title="选择题目" width="1200px" :visible.sync="visible" class="subject_dialog" top="0" @opened="handleOpened" destroy-on-close>
		<div class="subject_content_wrapper" v-loading="loading">
			<div class="subject_table_box">
				<el-form :inline="true" :model="listQuery" size="small">
					<el-form-item><el-input v-model="listQuery.title" placeholder="题目名称" clearable></el-input></el-form-item>
					<el-form-item>
						<el-select v-model="listQuery.del" placeholder="题目类型" clearable style="width: 100px;">
							<el-option label="单选题" value="1"></el-option>
							<el-option label="多选题" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-button type="primary" @click="getSubjectListData">查询</el-button></el-form-item>
				</el-form>
				<el-table :data="subjectData" ref="table" row-key="id" stripe style="width: 100%" border @select="handleSelected">
					<el-table-column type="selection" width="40" align="center"></el-table-column>
					<el-table-column prop="content" label="题目名称" min-width="360"></el-table-column>
					<el-table-column prop="type" label="题目类型" min-width="120">
						<template slot-scope="{ row }">
							<el-tag>{{ row.type | subjectType }}</el-tag>
						</template>
					</el-table-column>
				</el-table>
				<Pagination v-if="dataCount > listQuery.limit" :total="dataCount" @change="getSubjectListData" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
			</div>
			<div class="select_subject_box">
				<div class="title">选中的题目</div>
				<template v-if="!selectSubject.length">
					<el-empty description="暂无选中题目" :image-size="160"></el-empty>
				</template>
				<template v-else>
					<div class="item" v-for="(item, index) in selectSubject" :key="index">
						<div class="tit">{{ index + 1 }}. ({{ item.type | subjectType }}){{ item.content }}</div>
						<el-button-group>
							<el-button type="text" icon="el-icon-top" :disabled="index === 0" title="上移" @click="handleMoveSelected(index, 'up')"></el-button>
							<el-button
								type="text"
								icon="el-icon-bottom"
								:disabled="index === selectSubject.length - 1"
								title="下移"
								@click="handleMoveSelected(index, 'down')"
							></el-button>
							<el-button type="text" icon="el-icon-delete" title="删除" @click="handleDeleteSelected(index)"></el-button>
						</el-button-group>
					</div>
				</template>
			</div>
		</div>
		<template slot="footer">
			<div class="count">选中的题目：{{ selectSubject.length }}道</div>
			<div class="button">
				<el-button size="small" @click="visible = false">取消</el-button>
				<el-button size="small" type="primary" :loading="btnLoading" @click="handleConfirmAddSubject">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import { tbQuestionnaireContentQuery } from '@/api/admin/survey/tbQuestionnaireContent';
import { tbQuestionnaireRelationQueryQuestionType, tbQuestionnaireRelationAddBatch } from '@/api/admin/survey/tbQuestionnaireRelation';
export default {
	props: {
		value: {
			type: Boolean,
			defalut: false
		},
		surveyId: String
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			listQuery: {
				page: 1,
				limit: 10
			},
			dataCount: 0,
			subjectData: [],
			selectSubject: [],
			btnLoading: false
		};
	},
	filters: {
		subjectType(value) {
			if (value === '1') {
				return '单选题';
			} else if (value === '2') {
				return '多选题';
			} else if (value === '3') {
				return '填空题';
			} else if (value === '4') {
				return '填空题';
			} else if (value === '5') {
				return '填空题';
			}
		}
	},
	watch: {
		value(val) {
			this.visible = val;
		},
		visible(val) {
			this.$emit('input', val);
		}
	},
	methods: {
		//打开弹窗事件
		async handleOpened() {
			this.loading = true;
			await this.getSelectSubject();
			await this.getSubjectListData();
			this.loading = false;
		},

		//获取题目列表
		async getSubjectListData() {
			let result = await tbQuestionnaireContentQuery(this.listQuery).then(res => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.subjectData = !result.data ? [] : [...result.data];
				this.subjectData.forEach(item => {
					if (this.selectSubject.some(v => v.id === item.id)) {
						this.$nextTick(() => {
							this.$refs['table'].toggleRowSelection(item, true);
						});
					}
				});
			}
		},

		//获取选中的题目
		async getSelectSubject() {
			let result = await tbQuestionnaireRelationQueryQuestionType(this.surveyId).then(res => res.data);
			if (result.code === '0') {
				this.selectSubject = this.formatSelectedSubject(!result.data ? [] : [...result.data]);
			}
		},

		//格式化选中的题目
		formatSelectedSubject(arr) {
			let dataArr = arr.sort((a, b) => parseInt(a.orderSort) - parseInt(b.orderSort));
			let subjectArr = dataArr.map(item => item.contentList[0]);
			return subjectArr;
		},

		//表格选中发生变化
		handleSelected(selection) {
			this.selectSubject = [...selection];
		},

		//确认添加选中的题目
		async handleConfirmAddSubject() {
			let params = this.selectSubject.map((item, index) => {
				return {
					orderSort: index + 1,
					contentId: item.id,
					questionId: this.surveyId
				};
			});
			let result = await tbQuestionnaireRelationAddBatch(params).then(res => res.data);
			if (result.code === '0') {
				this.$message.success('问卷添加题目成功');
				this.visible = false;
			}
		},

		//上移选中题目
		handleMoveSelected(index, dir) {
			let data = this.selectSubject[index];
			if (dir === 'up') {
				this.selectSubject.splice(index - 1, 0, data);
				this.selectSubject.splice(index + 1, 1);
			} else if (dir === 'down') {
				this.selectSubject.splice(index, 1);
				this.selectSubject.splice(index + 1, 0, data);
			}
		},

		//删除选中的题目
		handleDeleteSelected(index) {
			let data = this.selectSubject[index];
			this.selectSubject.splice(index, 1);
			this.subjectData.forEach(item => {
				if (item.id === data.id) {
					this.$refs['table'].toggleRowSelection(item, false);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.subject_dialog ::v-deep {
	display: flex;
	align-items: center;
	justify-content: center;
	.el-dialog {
		margin: 0;
	}
	.el-dialog__header {
		padding: 10px;
		line-height: 1;
		flex-shrink: 0;
		border-bottom: solid 1px #eee;
	}
	.el-dialog__headerbtn {
		top: 15px;
		right: 15px;
	}
	.el-dialog__body {
		padding: 0;
	}
	.el-dialog__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		flex-shrink: 0;
		border-top: solid 1px #eee;
	}
}
.subject_content_wrapper {
	display: flex;
	min-height: 500px;
	max-height: calc(100vh - 150px);
}
.subject_table_box {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 10px 10px 0;
	overflow: auto;
	border-right: solid 1px #eee;
	.el-form-item {
		margin: 0 10px 0 0;
	}
	.el-table {
		flex: 1;
		margin-bottom: 10px;
	}
	.pagination {
		margin: 0 0 10px;
		line-height: 28px;
	}
}
.select_subject_box {
	width: 400px;
	flex-shrink: 0;
	overflow: auto;
	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 5px;
		height: 5px;
	}
	&::-webkit-scrollbar-track {
		border-radius: 0;
		background: rgba(0, 0, 0, 0.05);
	}
	&::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 3px;
		background-color: #bbb;
		transition: color 0.2s ease;
	}
	.title {
		font-size: 16px;
		padding: 10px 15px;
		font-weight: bold;
		border-bottom: solid 1px #eee;
	}
	.item {
		display: flex;
		align-items: flex-start;
		padding: 10px 10px 10px 15px;
		border-bottom: dashed 1px #eee;
		&:last-child {
			border-bottom: none;
		}
		.tit {
			flex: 1;
			line-height: 24px;
			font-weight: normal;
			margin-right: 10px;
			overflow: hidden;
		}
		.el-button {
			padding: 4px;
		}
	}
}
</style>
